<template>
  <div class="DataDisplay">
    <ul class="DataDisplay-list">
      <li class="DataDisplay-list-wrapper" v-for="i in dataDisplay" :key="i.id">
        <div class="DataDisplay-list-wrapper__data">
          <div>
            <p>{{ i.dataType }}</p>
            <span>{{ i.company }}</span>
          </div>
          <div>
            <p>{{ i.person }}</p>
            <span>{{ i.name }}</span>
          </div>
        </div>
      </li>
    </ul>
  </div>
</template>
<script>
import { dataDisplayData } from "../../../temp/data";
export default {
  name: "DataDisplay",
  data() {
    return {
      dataDisplay: {},
    };
  },
  created() {
    this.dataDisplay = dataDisplayData();
  },
  /**所有方法*/
  methods: {},
};
</script>
<style scoped lang='less'>
.DataDisplay {
  height: 100%;
  width: 100%;
}

.DataDisplay-list {
  height: 100%;
  width: 100%;
  display: flex;
  flex-wrap: wrap;

  .DataDisplay-list-wrapper {
    height: 25%;
    width: 50%;
    display: flex;
    justify-content: center;
    &__data {
      width: 70%;
      height: 100%;
      background: linear-gradient(#173147 0%, #3983c1 100%);
      border-radius: 5px;

      div {
        height: 50%;
        display: flex;
        align-items: center;
        p {
          color: #fff;
          padding: 0 0.5vw;
        }

        span {
          color: #5ebfbb;
        }
      }
    }
  }
}
</style>
